<template>
    <div class="app-container">
        <!-- <PageHeader :border="false" title="服装装备管理" />
        <el-divider class="mt-0" /> -->

        <el-row class="mb-3" :gutter="20">
            <el-col :span="24">
                <!--查询条件-->
                <el-form ref="queryParamsRef" :inline="true" :model="queryParams" label-width="auto">
                    <el-form-item label="服装装备名称" prop="name">
                        <el-input v-model="queryParams.name" clearable @clear="getClothingLists" />
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select v-model="queryParams.state" style="width: 12.5rem" @change="getClothingLists">
                            <el-option v-for="item in sys_normal_disable" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getClothingLists">
                            <el-icon class="me-1">
                                <Search />
                            </el-icon>
                            查询
                        </el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="handleRest(queryParamsRef)">
                            <el-icon class="me-1">
                                <Refresh />
                            </el-icon>
                            重置
                        </el-button>
                    </el-form-item>
                </el-form>

                <el-space class="mb-3">
                    <el-button type="primary" plain icon="Plus" @click="AddEditClothingRef.showAddDrawer()">
                        新增
                    </el-button>

                </el-space>

                <el-table ref="clothingTableRef" v-loading="loading" :data="clothingTables"
                    @selectionChange="selectChangeHandle" border stripe
                    :row-style="tableRowStyle">
                    <el-table-column label="服装装备名称" prop="name" />
                    <el-table-column label="所属单位" prop="depName" />
                    <!-- <el-table-column label="添加人" prop="roomcode" /> -->
                    <el-table-column label="添加日期" prop="adddate" width="180" />
                    <el-table-column label="有效期（年）" prop="youxiaoqi" />
                    <el-table-column label="发放默认数" prop="qtyci" />
                    <el-table-column label="计量单位" prop="jiliangdanwei" width="180">
                        <template #default="scope">
                            <dict-tag :options="nj_jiliangdanwei" :value="scope.row.jiliangdanwei" />
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="备注" prop="remark" /> -->
                    <el-table-column label="状态" prop="stateText" width="60">
                        <!-- <template #default="scope">
                            <dict-tag :options="sys_normal_disable" :value="scope.row.state"  />
                        </template> -->
                        <template #default="{ row, $index }">
                            <el-tag :type="row.stateText === '正常' ? 'success' : 'danger'" disable-transitions>{{
                                row.stateText
                            }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="140" align="center">
                        <template #default="scope">
                            <el-button link size="small" type="primary"
                                @click="AddEditClothingRef.showEditDrawer(scope.row)">
                                <el-icon class="me-1">
                                    <Edit />
                                </el-icon>
                                编辑
                            </el-button>
                            <el-button link size="small" type="danger" @click="deleteClothings(scope.row)">
                                <el-icon class="me-1">
                                    <Delete />
                                </el-icon>
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination v-show="total > 0" v-model:page="paging.pageNum" v-model:limit="paging.pageSize"
                    :total="total" @pagination="getClothingLists" />
            </el-col>
        </el-row>

        <AddEditClothing ref="AddEditClothingRef" @getClothingList="getClothingLists" />
    </div>
</template>

<script setup>
import { ElMessageBox } from 'element-plus'
import PageHeader from "@/components/PageHeader/index.vue";
import { getCurrentInstance } from "vue";

import AddEditClothing from "./AddEditClothing/AddEditClothing.vue";
import { getClothingList, deleteClothing, } from "@/api/ParameterSetting/Clothing";
import { getUserProfile } from "@/api/system/user";
import PageEnum from "@/enum/PageEnum.js";

const { proxy } = getCurrentInstance();
const { sys_normal_disable, nj_jiliangdanwei } = proxy.useDict('sys_normal_disable', 'nj_jiliangdanwei')


const queryParamsRef = ref()
const deleteStatus = ref(true)
const AddEditClothingRef = ref({})

const unitId = ref()
const deptList = ref([])
const refreshTable = ref(true);
const treeloading = ref(true);

const isExpandAll = ref(true);

const loading = ref(false)
const paging = ref({
    // 页码
    pageNum: 1,
    // 分页数量
    pageSize: PageEnum.SIZE
})

const queryParams = ref({
    name: '',
    jiliangdanwei: '',
    unit_id: ''
})

const total = ref(0)
const clothingTables = ref([
    {
        name: undefined,
        jiliangdanwei: undefined,
        adddate: undefined,
        youxiaoqi: undefined,
        unit_id: undefined,
        qtyci: undefined,
        state: undefined
    }
])

onMounted(() => {
    getClothingLists();
    // getDeptTree();
})
// 斑马纹样式函数
const tableRowStyle = ({ row, rowIndex }) => {
    if (rowIndex % 2 === 0) {
        return { backgroundColor: '#e6ecff' }; // 偶数行背景色
    }
    return {}; // 奇数行默认透明
}
// 获取列表
const getClothingLists = async () => {
    // 获取个人信息//找当前登录用户所在部门 
    await getUserProfile().then(res => {
        // console.log(res.data)
        // queryParams.value.unitId = res.data.unitId;     
    })

    loading.value = true
    await getClothingList(queryParams.value, paging.value).then(res => {
        console.log(res);
        clothingTables.value = res.rows
        total.value = res.total
        loading.value = false
    })
}

const clothingTableRef = ref()
const selectChangeHandle = (data) => {
    deleteStatus.value = data.length === 0;
}

const deleteClothings = async (row) => {
    ElMessageBox.confirm('确定删除此信息？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        deleteClothing(row.clothing_id).then(res => {
            getClothingLists()
        })
    }).catch(() => {
    });
}

// 重置搜索调解
const handleRest = (formEl) => {
    queryParams.value = {
        name: '',
        jiliangdanwei: '',
        unit_id: ''
    }
    getClothingLists()
}

</script>

<style lang="scss" scoped>
/* 保留斑马纹的同时添加悬停效果 */
:deep().el-table--striped .el-table__body tr.el-table__row--striped:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}

:deep().el-table__body tr:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}
</style>